<template>
  <div class="breathe">
    <div class="breathe_a"  v-for="(item,index) in typeList">
      <div class="allzs_ad">?</div>
      <div class="breathe_ah">
         <div class="ah_top">
           <div class="ah_top-left">
             <span>53</span>
             <span>bpm</span>
           </div>
           <div class="ah_top-right">
             <span>最高</span>
             <span>59bpm</span>
           </div>
         </div>
        <div class="ah_bottom">
          <div class="ah_bottom-left">
            <span>{{item.value}}</span>
            <span>正常</span>
          </div>
          <div class="ah_bottom-right">
            <span>最低</span>
            <span>59bpm</span>
          </div>
        </div>
      </div>
      <fAce04 :datam="data04"  v-if="item.type=='1'" ></fAce04>
      <fAce05 :datams="data05"  v-if="item.type=='2'" ></fAce05>
    </div>
  </div>
</template>

<script>
  export default {
    props:['datatype'],
    data(){
      return{
        typeList:[],
        data04:[],//平均心率
        data05:[],//呼吸
      }
    },
    created(){
      this.typeList=this.datatype;
      let ah=this.datatype;
      for(var i=0;i<ah.length;i++){
        if(ah[i].type==='1'){
          console.log('平均心率')
          this.forCe('1');
        }else{
          console.log('呼吸')
          this.forCe('2');
        }
      }


    },
    components:{
      fAce04:()=>import("./force04"),
      fAce05:()=>import("./force05"),
    },
    methods:{
      forCe(a){
        var that=this;
        if(a=='1'){
          that.$axios.get('../../../static/apijson/force03a.json').then((response) => {
            console.log(response)
            that.data04=response.data;
          });
        }
        else if(a=='2'){
          that.$axios.get('../../../static/apijson/force04a.json').then((response) => {
            console.log(response)
            that.data05=response.data;
          });
        }

      }
    }
  }
</script>

<style lang="scss" type="text/css" scoped>
  .breathe{
    width:100%;
    float:left;

  .breathe_a{
    margin: 0 0.3rem 0.2rem;
    height: 4.6rem;
    background: #0d2e71;
    border-radius: 0.1rem;
  .breathe_ah{
    width:100%;
    float:left;
    margin-top:-0.1rem;
    .ah_top{
      width:5.48rem;
      height:0.4rem;
      color:#ffffff;
      float:left;
      margin-left:0.3rem;

      .ah_top-left{
        width:4rem;
        height:100%;
        position: relative;
        bottom: 0px;
       float:left;
        span:first-child{
          font-size: 0.36rem;
          font-weight: bold;
          float:left;
          position: absolute;
          bottom: 0px;
          left:0px;
        }
        span:last-child{
          font-size: 0.18rem;
          position: absolute;
          bottom: 0px;
          left:0.46rem;
        }
      }

      .ah_top-right{
        width:1.48rem;
        height:100%;
        position: relative;
        float:left;
      span:first-child{
        font-size: 0.24rem;
        font-weight: bold;
        float:left;
        position: absolute;
        bottom: 0px;
        left:0px;
      }
      span:last-child{
        font-size: 0.18rem;
        position: absolute;
        bottom: 0px;
        left:0.56rem;
      }
      }
    }


      .ah_bottom{
        width:5.48rem;
        height:0.4rem;
        color:#ffffff;
        float:left;
        margin-left:0.3rem;
      .ah_bottom-left{
        width:4rem;

        height:100%;
        position: relative;
        bottom: 0px;
        float:left;
      span:first-child{
        font-size: 0.24rem;
        height: 0.34rem;
        margin-top: 0.06rem;
        float:left;
      }

      span:last-child{
        font-size: 0.24rem;
        padding: 0.06rem 0.2rem;
        background: linear-gradient(90deg, #2b61e8, #09c0ec);
        background: -webkit-linear-gradient(90deg, #2b61e8, #09c0ec);
        background: -moz-linear-gradient(90deg, #2b61e8, #09c0ec);
        background: -ms-linear-gradient(90deg, #2b61e8, #09c0ec);
        border-radius: 0.3rem;
        margin-left: 0.2rem;
        float:left;
        margin-top: -0.08rem;

      }
      }

      .ah_bottom-right{
        width:1.48rem;
        height:100%;
        position: relative;
        float:left;
      span:first-child{
        font-size: 0.24rem;
        font-weight: bold;
        float:left;
        position: absolute;
        bottom: 0px;
        left:0px;
      }
      span:last-child{
        font-size: 0.18rem;
        position: absolute;
        bottom: 0px;
        left:0.56rem;

      }
      }



      }

  }
  .breathe_atl{
    width: 100%;
    height: 100%;
    float: left;
    color:#bdbdbd;
    font-size:0.24rem;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    text-align:right;
    height:0.3rem;
  img{
    width:0.3rem;
    height:0.3rem;
    float:right;
    margin-right: 0.16rem;
  }
  span{
    float: right;
    margin-right: 0.2rem;
  }
  }
  }
  }
</style>

